import 'package:architecture/os_size.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'pinned_header_sliver_controller.dart';

class PinnedHeaderSliverPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetX<PinnedHeaderSliverController>(
        init: PinnedHeaderSliverController(),
        builder: (controller) {
          return Scaffold(
              appBar: AppBar(title: Text('pinned_header_sliver')),
              body: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _customScrollView1(controller),
                  _customScrollView2(controller),
                  _customScrollView3(controller)
                ],
              ));
        });
  }

  _customScrollView1(PinnedHeaderSliverController controller) {
    return Container(
        width: windowWidth * 0.3,
        child: Stack(
          children: [
            CustomScrollView(slivers: [
              PinnedHeaderSliver(child: _header(controller)),
              _list()
            ]),
            Align(
                alignment: Alignment(0.98, 0.98),
                child: FloatingActionButton(
                  onPressed: () {
                    controller.changeCount();
                  },
                  child: const Icon(Icons.add),
                )),
          ],
        ));
  }

  _customScrollView2(PinnedHeaderSliverController controller) {
    _sliverBar() {
      const Icon icon = Icon(
        CupertinoIcons.settings,
        color: Colors.black,
      );
      const TextStyle style = TextStyle(
          fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black);
      const Text text = Text('Settings', style: style);
      Widget action = IconButton(
        icon: icon,
        onPressed: () {},
      );
      return SliverLayoutBuilder(builder: (context, constraints) {
        double factor = (constraints.scrollOffset / kToolbarHeight).clamp(0, 1);
        factor = factor < 0.2 ? 0 : factor;
        AppBar header = AppBar(
          backgroundColor: Colors.white,
          surfaceTintColor: Colors.transparent,
          leading: IconButton(
              onPressed: () {
                Get.back();
              },
              icon: Icon(
                Icons.arrow_back_rounded,
                color: Colors.black,
              )),
          actions: [action],
          centerTitle: true,
          title: Opacity(
            opacity: factor,
            child: text,
          ),
        );
        return PinnedHeaderSliver(
          child: header,
        );
      });
    }

    _title() {
      const TextStyle style = TextStyle(
          fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black);
      const Text text = Text(
        'Settings',
        style: style,
      );
      return const SliverToBoxAdapter(
        child: Padding(
          padding: EdgeInsets.only(left: 12, bottom: 8),
          child: text,
        ),
      );
    }

    return Container(
      width: windowWidth * 0.3,
      child: CustomScrollView(slivers: [
        _sliverBar(),
        _title(),
        const PinnedHeaderSliver(child: Divider()),
        _list()
      ]),
    );
  }

  _customScrollView3(PinnedHeaderSliverController controller) {
    _sliverBar() {
      const Icon icon = Icon(
        CupertinoIcons.settings,
        color: Colors.black,
      );
      const TextStyle style = TextStyle(
          fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black);
      const Text text = Text('Settings', style: style);
      Widget action = IconButton(
        icon: icon,
        onPressed: () {},
      );
      return SliverLayoutBuilder(builder: (context, constraints) {
        double factor = (constraints.scrollOffset / kToolbarHeight).clamp(0, 1);
        factor = factor < 0.2 ? 0 : factor;
        AppBar header = AppBar(
          backgroundColor: Colors.white,
          surfaceTintColor: Colors.transparent,
          leading: IconButton(
              onPressed: () {
                Get.back();
              },
              icon: Icon(
                Icons.arrow_back_rounded,
                color: Colors.black,
              )),
          actions: [action],
          centerTitle: true,
          title: Opacity(
            opacity: factor,
            child: text,
          ),
        );
        return PinnedHeaderSliver(
          child: header,
        );
      });
    }

    _search() {
      BoxDecoration boxDecoration = BoxDecoration(
          color: const Color(0xffefeff1),
          borderRadius: BorderRadius.circular(8));

      Widget prefix = const Padding(
          padding: EdgeInsets.only(left: 8.0),
          child:
              Icon(CupertinoIcons.search, size: 20, color: Color(0xff808082)));

      void _toSearchPage() {
        Navigator.of(Get.context!).push(
          MaterialPageRoute(
              builder: (_) =>
                  Scaffold(appBar: AppBar(title: const Text('SearchPage')))),
        );
      }

      return PinnedHeaderSliver(
        child: ColoredBox(
          color: Colors.white,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 8, left: 12, right: 12),
                child: CupertinoTextField(
                  readOnly: true,
                  placeholder: '搜索',
                  onTap: _toSearchPage,
                  decoration: boxDecoration,
                  prefix: prefix,
                  style: const TextStyle(fontSize: 14),
                  placeholderStyle: const TextStyle(color: Color(0xff808082)),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                ),
              ),
              const Divider(),
            ],
          ),
        ),
      );
    }

    _title() {
      const TextStyle style = TextStyle(
          fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black);
      const Text text = Text(
        'Settings',
        style: style,
      );
      return const SliverToBoxAdapter(
        child: Padding(
          padding: EdgeInsets.only(left: 12, bottom: 8),
          child: text,
        ),
      );
    }

    return Container(
      width: windowWidth * 0.3,
      child: CustomScrollView(
          slivers: [_sliverBar(), _title(), _search(), _list()]),
    );
  }

  _header(PinnedHeaderSliverController controller) {
    return Container(
      color: Colors.purpleAccent,
      padding: const EdgeInsets.all(4),
      child: Material(
        color: Colors.purpleAccent,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
          side: BorderSide(
            width: 3,
            color: Colors.purpleAccent,
          ),
        ),
        child: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.symmetric(vertical: 48),
          child: Text(
            controller.count.value.isOdd
                ? 'Alternative Title\nWith Two Lines'
                : 'PinnedHeaderSliver',
          ),
        ),
      ),
    );
  }

  _list() {
    final ColorScheme colorScheme = Theme.of(Get.context!).colorScheme;
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Card(
            color: colorScheme.onSecondary,
            child: ListTile(
              textColor: colorScheme.secondary,
              title: Text('Item $index'),
            ),
          );
        },
        childCount: 30,
      ),
    );
  }
}
